<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="../framework/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/payment.css">
    <title>支付订单</title>
</head>
<body>
<div class="payment-page">
    <div class="header">
        <span class="back-arrow" onclick="location.href='index.html'">&lt;</span>
        <h1>支付订单</h1>
    </div>
    <div class="order-summary">
        <div class="payment-time">支付剩余时间 09:56</div>
        <div class="total-amount"><span>¥</span>14.90</div>
        <div class="order-list">
            <div class="address">迈德思客 炸鸡汉堡(清桥火车站店)</div>
            <div class="detail" id="orderDetailToggle">
                订单详情 <span class="toggle-icon">&#9656;</span>
            </div>
        </div>
    </div>

    <!-- 订单明细部分 -->
    <div class="order-details" id="orderDetails">
        <div class="order-item">
            <div class="item-info">
                <img src="../img/Snipaste_2024-07-09_18-13-09.png" height="197" width="197"/>
                <h3>新奥尔良嫩汁鸡腿饭</h3>
                <p>x1</p>
            </div>
            <div class="item-price">
                <span class="original-price">¥25</span>
                <span class="discounted-price">¥14.9</span>
            </div>
        </div>
        <div class="delivery-info">
            <span class="delivery-label">美团专送</span>
        </div>
    </div>
    <div class="payment-methods">
        <div class="meituan-pay">
            <div class=" top-info">
                <div class="method-icon">
                    <img src="../img/Snipaste_2024-07-10_16-01-56.png" height="51" width="45"/>
                    <div class="method-name">美团支付 </div>
                </div>
                <div class="choose"><img
                        src="../img/Snipaste_2024-07-10_16-15-19.png" height="45" width="52"/></div>
            </div>
            <div class="method-info">
                <div class="method-detail">招商银行储蓄卡(5278) </div>
                <p>.</p>
                <h4>&gt;</h4>

            </div>

        </div>
        <div class="wechat-pay">
            <div class=" top-info">
                <div class="method-icon">
                    <img src="../img/Snipaste_2024-07-10_17-44-40.png" height="121" width="129"/>
                    <div class="method-name">微信支付 </div>
                </div>
                <div class="choose">
                    <img src="../img/Snipaste_2024-07-10_17-49-02.png" height="43" width="35"/></div>
            </div>
        </div>
        <div class="ali-pay">
            <div class=" top-info">
                <div class="method-icon">
                    <img src="../img/Snipaste_2024-07-10_17-55-16.png" height="108" width="117"/>
                    <div class="method-name">支付宝支付 </div>
                </div>
                <div class="choose">
                    <img src="../img/Snipaste_2024-07-10_17-49-02.png" height="43" width="35"/></div>
            </div>
        </div>
        <div class="apple-pay">
            <div class=" top-info">
                <div class="method-icon">

                    <img src="../img/Snipaste_2024-07-10_17-58-38.png" height="36" width="42"/>
                    <div class="method-name">Apple Pay </div>
                </div>
                <div class="choose">
                    <img src="../img/Snipaste_2024-07-10_17-49-02.png" height="43" width="35"/></div>
            </div>
        </div>
    </div>

    <div class="footer">
        免密支付中
    </div>

</div>
<script src="../js/payment.js"></script>
</body>
</html>
